/* 亮色主题 (默认) */
:root {
    /* 主题色 */
    --color-gradient: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    --color-primary: #1890ff;
    --color-success: #52c41a;
    --color-warning: #faad14;
    --color-error: #f5222d;
    
    /* 文本颜色 */
    --text-primary: rgba(0, 0, 0, 0.85);
    --text-secondary: rgba(0, 0, 0, 0.45);
    --text-disabled: rgba(0, 0, 0, 0.25);
    
    /* 背景颜色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f0f2f5;
    --bg-disabled: #f5f5f5;
    
    /* 边框颜色 */
    --border-primary: #d9d9d9;
    --border-secondary: #f0f0f0;
    
    /* 画布颜色 */
    --canvas-bg: #ffffff;
    --canvas-grid: #f0f0f0;
    --canvas-selection: rgba(24, 144, 255, 0.2);
    
    /* 组件颜色 */
    --component-bg: #ffffff;
    --component-text: rgba(0, 0, 0, 0.85);
    --component-border: #d9d9d9;
    
    /* 阴影 */
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* 暗色主题 */
[data-theme='dark'] {
    /* 主题色 */
    --color-gradient: linear-gradient(135deg, #177ddc 0%, #13c2c2 100%);
    --color-primary: #177ddc;
    --color-success: #49aa19;
    --color-warning: #d89614;
    --color-error: #d32029;
    
    /* 文本颜色 */
    --text-primary: rgba(255, 255, 255, 0.85);
    --text-secondary: rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.25);
    
    /* 背景颜色 */
    --bg-primary: #141414;
    --bg-secondary: #1f1f1f;
    --bg-disabled: #303030;
    
    /* 边框颜色 */
    --border-primary: #434343;
    --border-secondary: #303030;
    
    /* 画布颜色 */
    --canvas-bg: #1f1f1f;
    --canvas-grid: #303030;
    --canvas-selection: rgba(23, 125, 220, 0.2);
    
    /* 组件颜色 */
    --component-bg: #1f1f1f;
    --component-text: rgba(255, 255, 255, 0.85);
    --component-border: #434343;
    
    /* 阴影 */
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* 应用主题颜色的通用类 */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-disabled { color: var(--text-disabled); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-disabled { background-color: var(--bg-disabled); }

.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }

/* 应用在常用元素上 */
body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.3s;
}

.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: 0 2px 8px var(--shadow-color);
    color: var(--text-primary);
    transition: all 0.3s;
}

input, textarea, select {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    transition: all 0.3s;
}

/* 修改通用按钮样式，添加特定选择器以避免覆盖已命名的按钮 */
button:not(.back-button):not(.save-button):not(.export-button):not(.clear-button) {
    background-color: var(--color-primary);
    color: white;
    border: none;
    transition: all 0.3s;
}

button.secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

/* 应用在 Ant Design 组件上 */
.ant-btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.ant-btn-primary:hover {
    background-color: var(--color-primary) !important;
    opacity: 0.8;
}

.ant-switch-checked {
    background-color: var(--color-primary) !important;
}

.ant-input {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.ant-input:hover,
.ant-input:focus {
    border-color: var(--color-primary) !important;
}

.ant-select-selector {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

.ant-select-selection-item {
    color: var(--text-primary) !important;
}

.ant-modal-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.ant-modal-header {
    background-color: var(--bg-primary) !important;
    border-bottom-color: var(--border-primary) !important;
}

.ant-modal-title {
    color: var(--text-primary) !important;
}

.ant-modal-close {
    color: var(--text-secondary) !important;
}

.ant-modal-close:hover {
    color: var(--text-primary) !important;
}

.ant-popover-inner {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Remove background to allow default border-based arrow */
.ant-popover-arrow {
    /* background-color: var(--bg-primary) !important; */ /* Removed this line */
}

.ant-popover-title {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-primary) !important;
}

.ant-color-picker {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

.ant-color-picker-panel {
    background-color: var(--bg-primary) !important;
}

.ant-color-picker-panel-inner {
    background-color: var(--bg-primary) !important;
}

.ant-color-picker-panel-inner-content {
    background-color: var(--bg-primary) !important;
}

.ant-color-picker-panel-inner-content .ant-color-picker-panel-inner-content-item {
    border-color: var(--border-primary) !important;
}

.ant-color-picker-panel-inner-content .ant-color-picker-panel-inner-content-item:hover {
    border-color: var(--color-primary) !important;
} 